{% extends 'base.html' %}
{% load static %}

{% block title %}搜索: {{ query }} - 商城系统{% endblock %}

{% block extra_css %}
<style>
    .search-header {
        background-color: #f8f9fa;
        padding: 30px 0;
        margin-bottom: 30px;
    }
    
    .search-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    
    .search-query {
        font-weight: bold;
        color: #007bff;
    }
    
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    
    .filter-title {
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .sort-btn {
        padding: 5px 15px;
        border-radius: 15px;
        margin-right: 5px;
        font-size: 14px;
    }
    
    .product-card {
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
    }
    
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .product-img {
        height: 200px;
        object-fit: contain;
        padding: 10px;
    }
    
    .price {
        color: #e74c3c;
        font-weight: bold;
    }
    
    .original-price {
        color: #95a5a6;
        text-decoration: line-through;
        font-size: 0.9rem;
        margin-left: 5px;
    }
    
    
</style>
{% endblock %}

{% block content %}
<!-- 搜索标题 -->
<section class="search-header">
    <div class="container">
        <h1 class="search-title">搜索结果: <span class="search-query">"{{ query }}"</span></h1>
        <p class="text-muted">找到 {{ page_obj.paginator.count }} 个相关商品</p>
        
    </div>
</section>

<div class="container">
    <!-- 筛选和排序 -->
    <div class="filter-section">
        <div class="row align-items-center">
            <div class="col-md-2">
                <div class="filter-title">排序方式：</div>
            </div>
            <div class="col-md-10">
                <div class="btn-group" role="group">
                    <a href="?q={{ query }}&sort=default" class="btn btn-outline-primary sort-btn {% if current_sort == 'default' or not current_sort %}active{% endif %}">默认</a>
                    <a href="?q={{ query }}&sort=sales" class="btn btn-outline-primary sort-btn {% if current_sort == 'sales' %}active{% endif %}">销量 <i class="bi bi-arrow-down"></i></a>
                    <a href="?q={{ query }}&sort=price_asc" class="btn btn-outline-primary sort-btn {% if current_sort == 'price_asc' %}active{% endif %}">价格 <i class="bi bi-arrow-up"></i></a>
                    <a href="?q={{ query }}&sort=price_desc" class="btn btn-outline-primary sort-btn {% if current_sort == 'price_desc' %}active{% endif %}">价格 <i class="bi bi-arrow-down"></i></a>
                    <a href="?q={{ query }}&sort=rating" class="btn btn-outline-primary sort-btn {% if current_sort == 'rating' %}active{% endif %}">评分 <i class="bi bi-arrow-down"></i></a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商品列表 -->
    <div class="row mb-4">
        {% for product in page_obj %}
        <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card product-card {% if product.stock <= 0 %}out-of-stock{% endif %}">
                {% if product.is_new %}
                <div class="product-badge">
                    <span class="badge bg-success">新品</span>
                </div>
                {% elif product.discount_percent > 0 %}
                <div class="product-badge">
                    <span class="badge bg-danger">{{ product.discount_percent }}% 折扣</span>
                </div>
                {% endif %}
                
                <a href="{% url 'product_detail' product.id %}">
                    <img src="{{ product.get_main_image_url }}" class="card-img-top product-img" alt="{{ product.name }}">
                </a>
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="{% url 'product_detail' product.id %}" class="text-decoration-none text-dark">{{ product.name }}</a>
                    </h5>
                    <div class="mb-2">
                        <span class="price">¥{{ product.price }}</span>
                        {% if product.original_price and product.original_price > product.price %}
                        <span class="original-price">¥{{ product.original_price }}</span>
                        {% endif %}
                    </div>
                    <p class="card-text text-muted">{{ product.description|default:product.name|truncatechars:50 }}</p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">销量: {{ product.sales }}</small>
                        </div>
                        <div>
                            {% if product.stock > 0 %}
                            <small class="text-success">有货</small>
                            {% else %}
                            <small class="text-danger">已售罄</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">{{ product.product_type.name }}</small>
                        <a href="{% url 'product_detail' product.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">
                未找到与"{{ query }}"相关的商品，请尝试其他关键词。
                <div class="mt-3">
                    <a href="{% url 'index' %}" class="btn btn-primary">返回首页</a>
                    <a href="{% url 'product_list' %}" class="btn btn-outline-primary ml-2">浏览全部商品</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- 分页 -->
    {% if page_obj.has_other_pages %}
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?q={{ query }}&sort={{ current_sort }}&page=1" aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?q={{ query }}&sort={{ current_sort }}&page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% endif %}
            
            {% for i in page_obj.paginator.page_range %}
                {% if page_obj.number == i %}
                <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                <li class="page-item"><a class="page-link" href="?q={{ query }}&sort={{ current_sort }}&page={{ i }}">{{ i }}</a></li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?q={{ query }}&sort={{ current_sort }}&page={{ page_obj.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?q={{ query }}&sort={{ current_sort }}&page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 排序时保留页码和其他参数
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            
            // 获取当前URL并解析参数
            const url = new URL(window.location.href);
            const params = new URLSearchParams(url.search);
            
            // 获取按钮中的排序参数（从href中提取）
            const newUrl = new URL(this.href);
            const sortParam = newUrl.searchParams.get('sort');
            
            // 更新排序参数
            params.set('sort', sortParam);
            
            // 确保搜索关键词参数存在
            if (newUrl.searchParams.has('q')) {
                params.set('q', newUrl.searchParams.get('q'));
            }
            
            // 跳转到更新后的URL
            window.location.href = `${url.pathname}?${params.toString()}`;
        });
    });
</script>
{% endblock %}